<template>
  <div class="container">
    <div class="content">&nbsp&nbsp{{ item.content }}</div>
    <div class="question">&nbsp&nbsp {{ item.question }}</div>
    <div class="answer">
      <van-field
        :value="answer"
        @change="(e) => (answer = e.mp.detail)"
        clearable
        placeholder="请输入答案"
        adjust-position
        bind:click-icon="onClickIcon"
      />
      <van-button square type="primary" custom-style="width:100%" @click="check"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import request from "../../../utils/request";

export default {
  data() {
    return {
      item: {},
      answer: "",
    };
  },

  onLoad: function (option) {
    this.getDetail(option.id);
  },

  methods: {
    async getDetail(id) {
      let response = await request({
        url: `/exam_service/reading/getReadingById/${id}`,
        method: "GET",
      });

      this.item = response.data.item;
    },

    async check() {
      wx.navigateTo({
        url:
          "/pages/result/main?answer=" +
          this.answer +
          "&match=" +
          this.item.answer,
      });
    },
  },
};
</script>

<style>
.content {
  font-size: 60rpx;
}
.question {
  font-size: 40rpx;
}
.container {
  position: relative;
  height: 100%;
}
.answer {
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 100%;
}
</style>
